<template>
  <!-- 组题列表 -->
  <div class="question-randoms-container">
    <!-- 面板区域 -->
    <el-card class="questionCard" shadow="never" min-width="1280px">
      <el-row type="flex">
        <el-col>
          <span class="keywords">关键字</span>
          <el-input class="ipt-keyword" v-model="queryInfo.keyword"> </el-input>
        </el-col>
        <el-col class="btn-col">
          <el-button @click="clearData">清除</el-button>
          <el-button type="primary" @click="loadRandomsList">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 数据总计 -->
      <el-alert type="info" :closable="false">
        <i class="el-icon-info"></i>
        <span class="title">数据一共 {{ total }} 条</span>
      </el-alert>
      <!-- /数据总计 -->

      <!-- 表格区域 -->
      <el-table :data="randomsList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="200" align="center">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.questionType === '1'
                ? '单选'
                : scope.row.questionType === '2'
                ? '多选'
                : '简答'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编号"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-for="(item, i) in scope.row.questionIDs"
              :key="i"
              @click="showDialog(item)"
            >
              {{ item.number }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180" align="center">
          <span slot-scope="scope">{{ scope.row.addTime }}</span>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" align="center">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="removeById(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格区域 -->

      <!-- 分页区域 -->
      <page-tool
        @pageSizeChange="onPageSizeChange"
        @pageChange="onPageChange"
        :current-page="queryInfo.page"
        :total="total"
        :page-size="queryInfo.pagesize"
      >
      </page-tool>
      <!-- /分页区域 -->
    </el-card>
    <!-- /面板区域 -->

    <!-- 题目预览对话框 -->
    <!-- dialog区域 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialog"
      width="50%"
      @closedialog="this.dialog = false"
    >
      <dialogComponent
        ref="questionsCom"
        :questionType="previewlist.questionType"
        :previewlist="previewlist"
      ></dialogComponent>
      <el-row class="confirm">
        <el-button class="confirmBtn" type="primary" @click="closedialog"
          >关 闭</el-button
        >
      </el-row>
    </el-dialog>
    <!-- /题目预览对话框 -->
  </div>
</template>

<script>
import {
  getRandomsList,
  deleteRandomsList,
  getPreviewList
} from '@/api/hmmm/questions'
import PageTool from '@/module-manage/components/page-tool.vue'
import dialogComponent from '@/module-hmmm/components/questions-preview'

export default {
  name: 'questions-randoms',
  data() {
    return {
      queryInfo: {
        page: 1, // 当前页
        pagesize: 20, // 默认每页页数
        keyword: '' // 关键词
      },
      randomsList: [], // 数据
      questionId: [], //题目编号
      total: 0, // 总数
      dialog: false,
      previewlist: {}
    }
  },
  components: {
    PageTool,
    dialogComponent
  },
  created() {
    this.loadRandomsList()
  },
  methods: {
    // 获取数据
    async loadRandomsList() {
      try {
        const { data } = await getRandomsList(this.queryInfo)
        // console.log(data)
        this.randomsList = data.items
        // console.log(this.randomsList)
        this.total = data.counts
      } catch (err) {
        this.$toast('获取数据失败!')
      }
    },
    async showDialog(item) {
      this.dialog = true
      try {
        const { data } = await getPreviewList({ id: item.id })
        this.previewlist = data
        // console.log(this.previewlist, '---------------------')
      } catch (err) {}
    },

    // 监听pagesize改变事件
    onPageSizeChange(pageSize) {
      this.queryInfo.pagesize = pageSize
      this.loadRandomsList()
    },
    // 监听 页码值 改变事件
    onPageChange(pageNum) {
      this.queryInfo.page = pageNum
      this.loadRandomsList()
    },

    // 删除确认提示框弹出
    async removeById(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // function(action, instance)，action 的值为'confirm', 'cancel'或'close'
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除! ')
      }
      const { data } = await deleteRandomsList(row)
      // console.log(data)
      this.$message.success('删除成功! ')
      this.loadRandomsList()
    },
    clearData() {
      this.queryInfo.keyword = ''
      this.loadRandomsList()
    },
    // 关闭对话框
    closedialog() {
      this.dialog = false
    }
  }
}
</script>

<style scoped lang="less">
.question-randoms-container {
  .el-card {
    margin: 15px;

    .keywords {
      font-size: 14px;
      margin-right: 10px;
      font-weight: 550;
      color: #606266;
    }

    .btn-col {
      display: flex;
      justify-content: flex-end;
    }

    .title {
      margin-left: 5px;
    }
    .ipt-keyword {
      width: 300px;
      height: 40px;
      border-radius: 5px;
    }

    .el-alert--info.is-light {
      margin: 20px 0 30px;
    }

    .pages {
      margin-top: 25px;
    }

    .el-pagination__jump {
      margin-right: 0px;
    }

    .pages {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
